<template>
	<view>
		<view class="">
			<!-- 搜索框 -->
			<u-search style="margin: 10px 2vw;" shape="round" placeholder="请输入要添加员工的账号:" :showAction="false"
				:clearabled="false" @search="goToAddFriend"></u-search>

			<view class="" v-if="myInfo!=null">
				<view class="friendList">
					<image :src="myInfo.image" mode="aspectFit"></image>
					<view class="userInfoBox">
						<view class="userName">
							{{myInfo.name}}
						</view>
						<view class="personalSignature">
							{{myInfo.personalSignature}}
						</view>
					</view>
				</view>

				<view class="detail" v-if="userId!=myInfo.userId&&admin">
					<view class="title">选择分组：</view>
					<view class="change">
						<view class="choose">
							<picker :value="staffGroupindex" :range="staffGroupList" @change="staffGroupChange">
								<view class="">{{staffGroupList[staffGroupindex]}}</view>
							</picker>
						</view>
					</view>

					<view class="title">填写职务：</view>
					<view class="change">
						<input class="choose" placeholder="请输入职务:" type="text" @input="changePosition">
					</view>

					<view class="title">填写姓名：</view>
					<view class="change">
						<input class="choose" placeholder="请输入姓名:" type="text" @input="changeName">
					</view>

					<view class="send" @click="addStaff">
						添加
					</view>
				</view>

			</view>

			<view v-if="myInfo==null" style="text-align: center; margin-top: 10px;">
				查无此人，请检查账号是否正确
			</view>

		</view>


	</view>
</template>

<script>
	import {
		socket
	} from '../../../utils/socket.js';
	export default {
		data() {
			return {
				account: "",
				myInfo: {},
				userId: "",
				content: "",
				notes: "",
				groupName: "",
				admin: false,

				staffGroupindex: 0,
				staffGroupList: [],
				position: "",
				name: ""
			};
		},
		onLoad(e) {
			this.userId = uni.getStorageSync("userId");
			this.account = e.account;
			this.searchFriend(e.account);
			if (uni.getStorageSync("enterprise").adminId = uni.getStorageSync("userId")) {
				this.admin = true
				this.staffGroupList = JSON.parse(uni.getStorageSync("enterprise").groupList);
			}
		},
		methods: {
			staffGroupChange(e) {
				this.staffGroupindex = e.detail.value;
			},
			changePosition(e) {
				this.position = e.detail.value
			},
			changeName(e) {
				this.name = e.detail.value
			},
			goToAddFriend(e) {
				if (e == "") {
					uni.showToast({
						title: "账号为空",
						icon: 'error'
					})
				} else {
					this.account = e
					this.searchFriend(e)
				}
			},
			addStaff(){
				uni.request({
					url: getApp().url + 'staff/addStaff',
					data: {
						userId: this.myInfo.userId,
						enterpriseId: uni.getStorageSync("enterprise").enterpriseId,
						groupName: this.staffGroupList[this.staffGroupindex],
						position: this.position,
						name:this.name
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "POST",
					success: (res) => {
						if(res.data.code==0){
							uni.showToast({
								icon:"success",
								title:"添加成功"
							})
							uni.switchTab({
								url: "/pages/enterprise/index/index"
							})
						}
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			searchFriend(account) {
				uni.request({
					url: getApp().url + 'user/getUserByAccount',
					data: {
						account: account
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (res) => {
						this.myInfo = res.data.data
						console.log(this.myInfo)
					},
					fail: (error) => {
						console.log(error);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.friendList {
		display: flex;
		padding: 5px 5vw;

		image {
			width: 16vw;
			height: 16vw;
			border-radius: 8vw;
		}

		.userInfoBox {
			width: 74vw;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.userName {
				margin-left: 2vw;
			}

			.personalSignature {
				margin-left: 2vw;
				font-size: small;
				color: #A09D9D;
			}
		}
	}

	.detail {
		margin: 0 5vw;

		.title {
			margin-top: 20px;
			color: #A09D9D;
			line-height: 40px;
		}

		.change {
			display: flex;
			height: 40px;

			.choose {
				width: 90vw;
				height: 40px;
				text-align: center;
				line-height: 40px;
				margin-right: 5vw;
				box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			}
		}


		.send {
			margin-top: 30px;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
			color: #FFF;
			background-color: red;
		}
	}
</style>